<!-- 逻辑 -->
<script setup lang="ts">
import { ref } from 'vue';

const food = ref('鸡腿')
const changeFood = () => {
    food.value = '汉堡'
}
const eatFood = (food: string) => {
    alert(food + '好好吃~再来一份')
}

const testEvent = (info: string, e?:any) => {
  console.log(info)
  if (e) {
    console.log(e)
  }
}
</script>

<!-- 结构 -->
<template>
<!-- 内联语句, 适用于处理简单的逻辑 -->
<h2 @click="food+='肉'">内联语句-直接写逻辑语句: {{ food }}</h2>

<!-- 处理函数 -->
<button @click="eatFood('隆江猪脚饭')">吃猪脚饭</button>
<button @click="eatFood('祖传一品隆江猪脚饭')">吃祖传一品隆江猪脚饭</button>

<!-- 默认的事件参数 -->
<!-- 事件触发时, 浏览器会默认传递一个 [事件参数] 给函数, 内部有很多信息
     触发事件时, 如果既要传递自定义的参数, 又要获取默认的事件参数
     可以使用 $event 替代默认的参数
 -->
<!-- <button @click="testEvent('翻滚吧, 牛宝宝')">测试事件参数</button> -->
<button @click="testEvent('滚犊子', $event)">测试事件参数</button>
</template>

<!-- 样式 -->
<style scoped>

</style>